<!-- 连接 + 添加按钮  -->
<template>
    <div class="flow-node-line"  v-if="!readonly"> 
        <el-icon color="#2a53fe"  
            class="flow-node-line-add flow-add-icon"
                ref="buttonRef" 
              
            size="30">
            <CirclePlusFilled />
        </el-icon>
    </div>
    <div  v-else class="flow-node-line-2" style="min-height: 30px;"></div>

    <el-popover ref="popoverRef" placement="right" :width="240" trigger="hover" :virtual-ref="buttonRef" >
      <el-row :gutter="20" style="gap: 10px;">
            <el-col :span="11">
                <el-button  class="flow-menu-btn" :icon="Search" plain type="primary" @click="addOneNode('between')">审批人</el-button>
            </el-col>
            <el-col :span="11">
                <el-button  class="flow-menu-btn" :icon="Search" plain type="primary" @click="addOneNode('serial')">条件分支</el-button>
            </el-col>
            <el-col :span="11">
                <el-button  class="flow-menu-btn" :icon="Search" plain type="primary" @click="addOneNode('parallel')">并行分支</el-button>
            </el-col>
            <!-- <el-col :span="11">
                <el-button class="flow-menu-btn" :icon="Search" plain type="primary">抄送人</el-button>
            </el-col> -->
          
      </el-row>
    </el-popover>
</template>

<script setup>
import {
    CirclePlusFilled
} from '@element-plus/icons-vue'
    import { defineEmits,defineProps,toRefs,ref,unref ,inject } from 'vue';
    import { ClickOutside as vClickOutside } from 'element-plus'
    import emitter from '../../../utils/emitter';
    const addNode = inject('addNode');
    const buttonRef = ref()
    const popoverRef = ref()
    const onClickOutside = () => {
        unref(popoverRef).popperRef?.delayHide?.()
    }
    const props = defineProps({
        nodeId: String,
        readonly: {
            type: Boolean,
            default:false,
        }
    })
    const {nodeId} = toRefs(props)
    
    const addOneNode = (type) => {
        vars.value.visible = false
        addNode({
            nodeId: nodeId.value,
            nodeType: type
        })
    }


    const vars = ref({
        nodeId: nodeId.value,
        visible: false,
    })

    const  onMouseEnter = (e) => {
        console.log('鼠标进入');
        vars.value.visible =  true;
        console.log(e)
        var target = e.target; // 获取事件触发元素
        var rect = target.getBoundingClientRect(); // 获取元素位置信息
        console.log("nodeId:" + nodeId.value)
        emitter.emit('showFloatMenu', {top:rect.top, left: rect.left, nodeId: nodeId.value})
    };
    const onMouseLeave = (e) => {
      console.log('鼠标离开');
      console.log(e)
      emitter.emit('closeFloatMenu', {})
      // 这里可以执行鼠标离开时的逻辑
    };
</script>

<style  scoped>
    .ep-row{
        padding-top: 10px;
    }
    .ep-row > .ep-col{
        margin-bottom: 10px;
       
    }
    .flow-menu-btn{
        width: 100%;
    }
    .flow-node-line-add:hover {
        transition: transform .2s; 
        transform: scale(1.2);
    }
    .flow-node-line{
        
        min-height: var(--global-flow-line-height);
        width: var(--global-flow-width);
        display: grid;
        align-content: center;
        justify-content: center;
        position: relative;
        z-index: 1;
    }
    /* .flow-add-icon{
        background-color: var(--global-flow-background-color);
    } */

    .flow-node-line::after {
        content: '';
        left: 50%;
        position: absolute;
        /* top: 0; */
        height: calc(50% - 13px);
        transform: translate(-50%, 0px);
        /* transform: translate(-50%, 0px); */
        /* bottom: 0; */
        /* border-left: 2px solid var(--global-flow-line-color); */
        width: 1px;
        background-color: var(--global-flow-line-color);
    }
    .flow-node-line::before {
        content: '';
        left: 50%;
        position: absolute;
        /* top: 0; */
        height: calc(50% - 12px);
        /* transform: translate(-50%, 0px); */
        bottom: 0;
        transform: translate(-50%, 0px);
        /* border-left: 2px solid var(--global-flow-line-color) ; */
        width: 1px;
        background-color: var(--global-flow-line-color);
    }
    .flow-node-line-2::before{
        content: '';
        left: 50%;
        position: absolute;
        min-height: 30px;
        /* top: 0; */
        height: 30px;
        transform: translate(-50%, 0px);
        /* bottom: 0; */
        /* border-left: 2px solid var(--global-flow-line-color); */
        width: 1px;
        background-color: var(--global-flow-line-color);
    }
</style>